<template>
  <div class="tocase" v-if="scrollShow">
    <div
      class="scroll"
    >
    <!-- <van-image round width="16px" height="16px" src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTL82bkbLWSR4D6Mib4ojM7KPjzoiafdMibDDpksiapzOHStkiaMRrs5zYmlShaY1Vh9NCgf4dg72RlK0Cw/132"/> -->
      <van-image round width="16px" height="16px" :src="item.avatar" v-if="item&&item.avatar"/>
      <span class="name" v-if="item&&item.scroll_name">{{ item.scroll_name }}</span>
      <span class="name" v-if="item">{{ item.nickname }} {{!title?  '购买': title}}</span>
    </div>
  </div>
</template>

<script>
import { Image as VanImage } from "vant";
export default {
  components: {
    VanImage
    // [Icon.name]: Icon,
  },
  props: {
    scrollList: {
      type: Object,
      required: true,
    },
    title: {
      type: String
    }
    
  },
  data() {
    return {
      index: 0,
      num: 0,
      scrollShow: false,
      flag:false,
      newList:[],
      item:''
    };
  },
  created() {
    // this.scrollListold = this.scrollList
    
    // this.getScrcoll()
  },
  watch:{
    scrollList:{
      handler(val){
        // if(val.length == 0) return
        this.newList = val
        this.item = this.newList[this.index-1]
        this.num = this.newList.length - 1;
        // for(let i=0,len=this.newList.length;this.newList<len;i++){

        // }
        // this.$forceUpdate()
        this.setTime()
      },
      immediate:true,
      deep:true
    }
  },
  computed:{
    item() {
      return this.newList[this.index-1]
    }
  },
  mounted() {
    // this.num = this.scrollList.length - 1;
    // console.log("this.num",this.num)
    // console.log("+++++++scrollList___in scrollData++++++",this.scrollList)
    // this.newList = this.scrollList;
    // this.setTime()
  },
  methods: {
    setTime() {
      let timeSet = setInterval(() => {
        this.scrollShow = false
        
        this.changeIndex()
       
      }, 4000);
    },
    changeIndex(){
      this.index++
      this.item = this.newList[this.index-1]
      if(this.index>this.num){
        this.index = 0
          this.item = this.newList[this.index]
      }
      
      setTimeout(()=>{
        this.scrollShow = true
      },2000)
    },
    getScrcoll() {
      
    },
    timeScroll() {

    },
  },
};
</script>

<style lang="scss" scoped>
.tocase {
  position: fixed;
    display: flex;
    align-items: center;
    top: 2rem;
    left: 1rem;
    height: 2rem;
    background: rgba(0, 0, 0, 0.2);
    line-height: 2rem;
    border-radius: 5px;
    color: #fff;
    text-align: center;
    padding: 0 10px;
  .scroll {
    display: flex;
    align-items: center;
    // position: fixed;
    // display: flex;
    // align-items: center;
    // top: 2rem;
    // left: 1rem;
    // height: 2rem;
    // background: rgba(0, 0, 0, 0.2);
    // line-height: 2rem;
    // border-radius: 5px;
    // color: #fff;
    // text-align: center;
    // padding: 0 10px;
    // background-color: rgba(255, 0, 0, 0.05);
    .name {
      margin-left: 6px;
    }
  }
}
</style>